<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input v-model="filters.keyword" placeholder="关键字"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="getPage">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <!--列表-->
        <el-table :data="systemDictionarys" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="80">
            </el-table-column>
            <el-table-column prop="sn" label="编号" width="120" sortable>
            </el-table-column>
            <el-table-column prop="name" label="名称" width="140" sortable>
            </el-table-column>
            <el-table-column label="操作">
                <template scope="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                    <el-button type="text" @click="table = true;getSystemDictionaryDetail(scope.$index, scope.row)">查看详情</el-button>

                </template>
            </el-table-column>
        </el-table>

        <!--抽屉开启-->

        <el-drawer
                title="字段明细!"
                :visible.sync="table"
                direction="rtl"
                size="50%">

            <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
                <el-form :inline="true" :model="filters">
                    <el-form-item>
                        <el-input v-model="filters.keyword" placeholder="关键字"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" v-on:click="getPageByDetail">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="detailByHandleAdd">新增</el-button>
                    </el-form-item>
                </el-form>
            </el-col>

            <el-table :data="systemDictionaryDatas" highlight-current-row v-loading="listLoadingByDetail">
                <el-table-column property="id" label="编号" width="150"></el-table-column>
                <el-table-column property="name" label="分类"></el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <el-button size="small" @click="detailByhandleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="detailByHandleDel(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 抽屉的分页 -->
            <el-col :span="24" class="toolbar">
                <el-pagination layout="prev, pager, next"
                               @current-change="handleCurrentChangeByDetail"
                               :page-size="pageSizeByDetail"
                               :total="totalByDetail"
                               :current-page="pageByDetail"
                               style="float:right;">
                </el-pagination>
            </el-col>
        </el-drawer>

        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
            <el-pagination layout="prev, pager, next"
                           @current-change="handleCurrentChange"
                           :page-size="pageSize"
                           :total="total"
                           :current-page="page"
                           style="float:right;">
            </el-pagination>
        </el-col>

        <!--
            新增或编辑界面
            :rules：声明校验规则
            ref：绑定当前表单，并给它取一个别名
        -->
        <el-dialog title="新增/编辑" :visible.sync="systemDictionaryFormVisible" :close-on-click-modal="false">
            <el-form :model="systemDictionaryForm" label-width="80px" :rules="systemDictionaryFormRules" ref="systemDictionaryForm">
                <el-form-item label="编号" prop="sn">
                    <el-input v-model="systemDictionaryForm.sn" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="systemDictionaryForm.name" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="systemDictionaryFormVisible = false">取消</el-button>
                <el-button type="primary" @click.native="save" :loading="systemDictionaryLoading">提交</el-button>
            </div>
        </el-dialog>

        <!-- 抽屉的新增编辑页面 -->
        <el-dialog title="新增/编辑明细" :visible.sync="systemDictionaryFormVisibleByDetail" :close-on-click-modal="false">
            <el-form :model="systemDictionaryFormByDetail" label-width="80px" :rules="systemDictionaryFormRulesByDetail" ref="systemDictionaryFormByDetail">
                <el-form-item label="名称" prop="name">
                    <el-input v-model="systemDictionaryFormByDetail.name" auto-complete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="systemDictionaryFormVisibleByDetail = false">取消</el-button>
                <el-button type="primary" @click.native="saveByDetail" :loading="systemDictionaryLoadingByDetail">提交</el-button>
            </div>
        </el-dialog>

    </section>
</template>

<script>

    export default {
        data() {
            return {
                table: false,                // 抽屉表格默认关闭
                systemDictionaryDatas: [],   // 后台查询给当前抽屉表格赋值

                filters: {
                    keyword: ''
                },

                systemDictionarys: [],
                total: 0,
                page: 1,
                pageSize: 10,

                totalByDetail: 0,
                pageByDetail: 1,
                pageSizeByDetail: 6,

                listLoading: false,
                listLoadingByDetail: false,
                sels: [],//列表选中行

                systemDictionaryFormVisible: false,         //新增或编辑界面是否显示
                systemDictionaryFormVisibleByDetail: false, //新增或编辑界面是否显示
                systemDictionaryLoading: false,		        // 忙等框是否显示
                systemDictionaryLoadingByDetail: false,		// 抽屉忙等框是否显示
                systemDictionaryFormRules: {		        // 声明校验规则
                    sn: [
                        { required: true, message: '请输入编号', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ]
                },
                systemDictionaryFormRulesByDetail: {		// 声明校验规则
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ]
                },

                //编辑界面数据
                systemDictionaryForm: {
                    id: null,
                    sn: '',
                    name: ''
                },
                types_id: null,

                systemDictionaryFormByDetail: {
                    id: null,
                    name: '',
                },
            }
        },
        methods: {
            handleCurrentChange(val) {
                this.page = val;
                this.getSystemDictionarys();
            },
            handleCurrentChangeByDetail(val) {
                this.pageByDetail = val;
                // console.log(val)
                this.getQueryDetailKey();
            },
            // 高级查询每次定位到第一页
            getPage(){
                this.page = 1;
                this.getSystemDictionarys();
            },
            getPageByDetail(){
                this.pageByDetail = 1;
                this.getQueryDetailKey();
            },

            //获取字段列表
            getSystemDictionarys() {
                let para = {
                    currentPage: this.page,
                    pageSize: this.pageSize,
                    keyword: this.filters.keyword
                };
                this.listLoading = true;	// 开启忙等框
                // 发送axios请求，从后端拿数据
                this.$http.post("/systemDictionary",para)
                    .then(result=>{
                        this.total = result.data.total;
                        this.systemDictionarys = result.data.rows;
                        this.listLoading = false;
                    })
                    .catch(result=>{
                        this.$message({
                            message: '系统异常',
                            type: 'error'
                        });
                    })
            },
            //获取字段详情列表
            getSystemDictionaryDetail(index, row){
                this.types_id = row.id;
                let para = {
                    currentPage: this.pageByDetail,
                    pageSize: this.pageSizeByDetail,
                    keyword: this.filters.keyword,
                    id: this.types_id
                };
                this.$http.post("/systemDictionary/detail",para)
                    .then(result=>{
                        this.totalByDetail = result.data.total;
                        this.systemDictionaryDatas = result.data.rows;
                        this.listLoadingByDetail = false;
                    })
                    .catch(result=>{
                        this.$message({
                            message: '系统异常',
                            type: 'error'
                        });
                    })
            },
            getQueryDetailKey(){
                let para = {
                    currentPage: this.pageByDetail,
                    pageSize: this.pageSizeByDetail,
                    keyword: this.filters.keyword,
                    id: this.types_id
                };
                this.$http.post("/systemDictionaryDetail",para)
                    .then(result=>{
                        this.totalByDetail = result.data.total;
                        this.systemDictionaryDatas = result.data.rows;
                        this.listLoadingByDetail = false;
                    })
                    .catch(result=>{
                        this.$message({
                            message: '系统异常',
                            type: 'error'
                        });
                    })
            },



            //删除
            handleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '温馨提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true; // 开启忙等框
                    //NProgress.start();
                    this.$http.delete("/systemDictionary/"+row.id) // row.id拿到当前字段的id，传到后台去
                        .then(result=>{
                            if(result.data.success){
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.page = 1; // 如果删除成功，跳转到第一页
                            }else {
                                this.$message({
                                    message: '删除失败'+result.data.message,
                                    type: 'error'
                                });
                            }
                            this.getSystemDictionarys(); // 重新刷新列表
                        })
                        .catch(result=>{

                        })
                }).catch(() => {

                });
            },
            detailByHandleDel: function (index, row) {
                this.$confirm('确认删除该记录吗?', '温馨提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoadingByDetail = true; // 开启忙等框
                    this.$http.delete("/systemDictionaryDetail/"+row.id) // row.id拿到当前字段的id，传到后台去
                        .then(result=>{
                            if(result.data.success){
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.pageByDetail = 1; // 如果删除成功，跳转到第一页
                                this.listLoadingByDetail = false; // 关闭忙等框
                            }else {
                                this.$message({
                                    message: '删除失败'+result.data.message,
                                    type: 'error'
                                });
                            }
                            // this.table = false;
                            this.getQueryDetailKey(); // 重新刷新列表
                        })

                        .catch(result=>{

                        })
                }).catch(() => {

                });
            },
            //显示编辑界面
            handleEdit: function (index, row) {
                this.systemDictionaryFormVisible = true;	// 显示编辑弹出框
                this.systemDictionaryForm = Object.assign({}, row);	// 回显数据 ，克隆当前行的数据

            },
            //显示新增界面
            handleAdd: function () {
                this.systemDictionaryFormVisible = true; // 显示新增弹出框
                this.systemDictionaryForm = { // 清空表单数据
                    id: null,
                    sn: '',
                    name: ''
                }
            },

            //详情显示编辑界面
            detailByhandleEdit: function (index, row) {
                this.systemDictionaryFormVisibleByDetail = true;	// 显示编辑弹出框
                this.systemDictionaryFormByDetail = Object.assign({}, row);	// 回显数据 ，克隆当前行的数据
            },
            //详情显示新增界面
            detailByHandleAdd: function () {
                this.systemDictionaryFormVisibleByDetail = true; // 显示新增弹出框
                this.systemDictionaryFormByDetail = { // 清空表单数据
                    id: null,
                    name: ''
                }
            },

            //编辑
            save: function () {
                this.$refs.systemDictionaryForm.validate((valid) => {           // 再一次触发表单校验
                    if (valid) {
                        this.$confirm('确认提交吗？', '温馨提示', {}).then(() => {
                            this.systemDictionaryLoading = true;		            // 显示忙等框
                            let para = Object.assign({}, this.systemDictionaryForm); // 克隆当前行数据
                            this.$http.put("/systemDictionary",para)
                                .then(result=>{
                                    this.systemDictionaryLoading = false;	        // 关闭忙等框
                                    if (result.data.success){
                                        this.$message({
                                            message: "操作成功!",
                                            type: 'success'
                                        });
                                        this.systemDictionaryFormVisible = false;   // 关闭弹出框
                                        this.page = 1;                              // 定位到第一页
                                        this.getSystemDictionarys();                // 重新刷新列表
                                    }else {
                                        this.$message({
                                            message: result.data.message,	        // 直接提示后端错误
                                            type: 'error'
                                        });
                                    }
                                })
                                .catch(result=>{
                                    this.$message({
                                        message: '系统错误',
                                        type: 'error'
                                    });
                                    this.systemDictionaryLoading = false;		// 关闭忙等框
                                    this.systemDictionaryFormVisible = false;   // 关闭弹出框
                                })

                        });
                    }
                });
            },
            saveByDetail: function () {
                this.$refs.systemDictionaryFormByDetail.validate((valid) => {                   // 再一次触发表单校验
                    if (valid) {
                        this.$confirm('确认提交吗？', '温馨提示', {}).then(() => {
                            this.systemDictionaryLoadingByDetail = true;		                // 显示忙等框
                            let para = Object.assign({}, this.systemDictionaryFormByDetail);    // 克隆当前行数据
                            para.types_id = this.types_id;
                            // console.log(para)
                            this.$http.put("/systemDictionaryDetail",para)
                                .then(result=>{
                                    this.systemDictionaryLoadingByDetail = false;	            // 关闭忙等框
                                    if (result.data.success){
                                        this.$message({
                                            message: "操作成功!",
                                            type: 'success'
                                        });
                                        this.systemDictionaryFormVisibleByDetail = false;       // 关闭弹出框
                                        this.pageByDetail = 1;                                  // 定位到第一页
                                        this.getQueryDetailKey();                               // 重新刷新列表
                                        // this.table = false;
                                    }else {
                                        this.$message({
                                            message: result.data.message,	                    // 直接提示后端错误
                                            type: 'error'
                                        });
                                    }
                                })
                                .catch(result=>{
                                    this.$message({
                                        message: '系统错误',
                                        type: 'error'
                                    });
                                    this.systemDictionaryLoadingByDetail = false;		         // 关闭忙等框
                                    this.systemDictionaryFormVisibleByDetail = false;            // 关闭弹出框
                                })

                        });
                    }
                });
            },

            selsChange: function (sels) {
                this.sels = sels;
            },
            //批量删除
            batchRemove: function () {
                var ids = this.sels.map(item => item.id); // [1,2,3]
                this.$confirm('确认删除选中记录吗？', '温馨提示', {
                    type: 'warning'
                }).then(() => {                                 // 返回框的确认框
                    this.listLoading = true;                     // 开启忙等框
                    this.$http.patch("/systemDictionary",ids)
                        .then(result=>{
                            if (result.data.success){           // 删除成功
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.page = 1;                  // 删除成功，定位到第一页
                            }else {
                                this.$message({
                                    message: '删除失败'+result.message,
                                    type: 'error'
                                });
                            }
                            this.getSystemDictionarys();         // 重新刷新列表
                        })
                        .catch(result=>{
                            this.listLoading = false;           // 关闭忙等框
                            this.$message({
                                message: '系统异常',
                                type: 'error'
                            });
                        })

                }).catch(() => {	        // 返回框的取消框

                });
            },

        },
        mounted() {
            this.getSystemDictionarys();	// 页面加载就查询字段的所有数据
        }
    }

</script>

<style scoped>

</style>